<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    select {
      width: 200px;
      height: 200px;
      background-color: #33cccc;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <select id="all" size="5" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="choose" multiple="multiple">
    <option>西瓜</option>
  </select>
  <script src="../cs.js"></script>
  <script>
    var btn1 = cs$("btn1");
    var btn2 = cs$("btn2");
    var btn3 = cs$("btn3");
    var btn4 = cs$("btn4");
    var li1 = cs$("all");
    var li2 = cs$("choose");
    var lis = document.querySelectorAll("#all option")
    console.dir(lis)
    var lis2 = document.querySelectorAll("#choose option")
    console.dir(lis2)
    // // 点击移动


    // for (let index = 0; index < lis.length; index++) {
    //   lis[index].onclick = function () {
    //     if (this.parentNode === li1) {
    //       li2.appendChild(this)
    //     }else if (this.parentNode === li2) {
    //       li1.appendChild(this)
    //     }else{
    //       console.log(111);
    //       console.dir(this.parentNode)
    //     }
    //   }
    // }
    // 点击按钮全部移动
      btn1.onclick = function () {
        for (let index1 = 0; index1 < lis.length; index1++) {
          li2.appendChild(lis[index1])
        }
      }
      btn2.onclick = function name(params) {
        for (let index1 = 0; index1 < lis.length; index1++) {
          li1.appendChild(lis[index1])
        }
      }
      // 点击按钮移动
      // var ls = [];
      // for (let index2 = 0; index2 < lis.length; index2++) {
      //   lis[index2].onclick = function () {
      //     ls.push(this)
      //     console.log(ls);
      //   }
      // }
      btn3.onclick = function () {
                  var ls = [];
                for (let index2 = 0; index2 < lis.length; index2++) {
                  lis[index2].onclick = function () {
                    ls.push(this)
                    console.log(ls);
                  }
                }
        for (let index3 = 0; index3 < ls.length; index3++) {
          console.log(ls);
            li2.appendChild(ls[index3])        
        }
        } 
      btn4.onclick = function () {
        for (let index4 = 0; index4 < ls.length; index4++) {
          console.log(ls);
            li1.appendChild(ls[index4])        
        }
        }
      
    // for (let index = 0; index < lis.length; index++) {
    //   lis[index].onclick = function () {
    //     console.log(00)
    //     li2.appendChild(this)
    //   }
    // }
    // for (let index1 = 0; index1 < lis2.length; index1++) {
    //   lis2[index1].onclick = function () {
    //     console.log(11)
    //     li1.appendChild(this)
    //   }
    // }
  </script>
</body>

</html>